<!--
/*
 * Copyright (C) 2021 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */
-->
<mat-card class="status-card">
  <mat-card-content class="plan-status">
    <mat-tab-group [dynamicHeight]="true">
      <mat-tab label="Overview">
        <!--pre>{{ overview }}</pre-->
        <mat-table [dataSource]="overview">
          <ng-container matColumnDef="overviewKey">
            <mat-header-cell *matHeaderCellDef>key </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.key}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="overviewValue">
            <mat-header-cell *matHeaderCellDef> Value </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
          </ng-container>
          <mat-row *matRowDef="let row; columns: overviewColumns;"></mat-row>
        </mat-table>
      </mat-tab>
      <mat-tab label="SQL">
        <pre>{{ sql }}</pre>
      </mat-tab>
      <mat-tab label="Tables">
        <mat-table [dataSource]="tables">
          <ng-container matColumnDef="tableId">
            <mat-header-cell *matHeaderCellDef>Table Name </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.tableId}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="unused">
            <mat-header-cell *matHeaderCellDef>Unused Cache</mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.reason}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="explanation">
            <mat-header-cell *matHeaderCellDef>Explanation </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.explanation}} </mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: tableColumns;"></mat-row>
        </mat-table>
      </mat-tab>
      <mat-tab label="Reservation">
        <mat-table [dataSource]="reservation_data">
          <ng-container matColumnDef="reservationKey">
            <mat-header-cell *matHeaderCellDef>{{ reservationsHeader[0] }} </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.key}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="reservationValue">
            <mat-header-cell *matHeaderCellDef> {{ reservationsHeader[1] }} </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
          </ng-container>
          <mat-header-row *matHeaderRowDef="reservationColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: reservationColumns;"></mat-row>
        </mat-table>
      </mat-tab>
      <mat-tab label="Statistics">
        <mat-table [dataSource]="statistics" id="statsTable">
          <ng-container matColumnDef="statskey">
            <mat-header-cell *matHeaderCellDef>Key </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.key}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="statsvalue">
            <mat-header-cell *matHeaderCellDef> Value </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
          </ng-container>
          <mat-row *matRowDef="let row; columns: statisticsColumns;"></mat-row>
        </mat-table>
      </mat-tab>
      <mat-tab label="Settings">
        <mat-table [dataSource]="settings_data">
          <ng-container matColumnDef="settingsKey">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.key}} </mat-cell>
          </ng-container>
          <ng-container matColumnDef="settingsValue">
            <mat-header-cell *matHeaderCellDef> </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.value}} </mat-cell>
          </ng-container>

          <mat-row *matRowDef="let row; columns: settingsColumns;"></mat-row>
        </mat-table>
      </mat-tab>
      <div *ngIf="errorMsgs != null">
        <mat-tab label="Errors">
          <pre>{{ errorMsgs }}</pre>
        </mat-tab>
      </div>
      <mat-tab label="Display Options">
        <mat-card-header>
          <mat-card-title>Select display options</mat-card-title>
        </mat-card-header>
        <mat-card-content>
          <mat-form-field>
            <mat-label>Query Stages Display</mat-label>
            <mat-select [(value)]='stageDisplayOption' (selectionChange)="changeStageDisplayOption($event)">
              <mat-option value="hideRepartition">Hide Repartition</mat-option>
              <mat-option value="showRepartition">Show Repartition</mat-option>
            </mat-select>
          </mat-form-field>
        </mat-card-content>
      </mat-tab>
    </mat-tab-group>
  </mat-card-content>
</mat-card>